<template>
  <div>
    <Modal v-model:visible="visible" title="新建任务" @cancel="onClose">
      <template #footer>
        <Button key="submit" type="primary" @click="handleSubmit">创建</Button>
        <Button key="back" @click="handleReset">重置</Button>
      </template>
      <Form :model="formState" name="validate_other" ref="formRef" v-bind="formItemLayout">
        <FormItem name="endpointName" label="端点名称" :rules="[{ required: true, message: '请选择端点' }]">
          <Select
            v-model:value="formState.endpointName"
            placeholder="请选择端点"
            :options="endPointList"
            label-in-value
          >
          </Select>
        </FormItem>
        <FormItem name="monitorTime" label="监控时间">
          <RadioGroup v-model:value="formState.monitorTime">
            <Radio value="now">当前时间</Radio>
            <Radio value="custom">自定义开始时间</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem name="startTime" style="margin-left: 115px" v-if="formState.monitorTime == 'custom'">
          <DatePicker show-time placeholder="请选择开始时间" style="width: 278px" @change="onChange" />
        </FormItem>
        <FormItem name="duration" label="持续时间">
          <RadioGroup v-model:value="formState.duration">
            <Radio :value="5">5 min</Radio>
            <Radio :value="10">10 min</Radio>
            <Radio :value="15">15 min</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem label="起始监控时间">
          <FormItem name="minDurationThreshold" no-style>
            <InputNumber v-model:value="formState.minDurationThreshold" :min="0" />
          </FormItem>
          <span class="ant-form-text">ms</span>
        </FormItem>

        <FormItem name="dumpPeriod" label="监控间隔">
          <RadioGroup v-model:value="formState.dumpPeriod">
            <Radio :value="10">10 ms</Radio>
            <Radio :value="20">20 ms</Radio>
            <Radio :value="50">50 ms</Radio>
            <Radio :value="50">100 ms</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="最大采样数">
          <FormItem name="maxSamplingCount" no-style>
            <InputNumber v-model:value="formState.maxSamplingCount" :min="1" :max="9" />
          </FormItem>
          <span class="ant-form-text">个</span>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script lang="ts" setup>
import {
  Modal,
  Form,
  FormItem,
  Select,
  Radio,
  RadioGroup,
  DatePicker,
  InputNumber,
  Button,
  message,
} from 'ant-design-vue';
import { Dayjs } from 'dayjs';
import { reactive, ref } from 'vue';
import { createTask } from '/@/api/maintenance-center/skywalking/profiling/profiling';
const visible = ref<boolean>(false);
const endPointList = ref();
const serviceId = ref();
const startTime = ref();
const formRef = ref();
let createParam = {
  dumpPeriod: 0,
  duration: 0,
  endpointName: '',
  maxSamplingCount: 0,
  minDurationThreshold: 0,
  serviceId: '',
  startTime: 0,
};
const formState = reactive<Record<string, any>>({
  endpointName: undefined,
  duration: 5,
  monitorTime: 'now',
  minDurationThreshold: 0,
  dumpPeriod: 10,
  maxSamplingCount: 1,
});
const handleCreateParam = () => {
  let time = new Date().valueOf();
  if (formState.monitorTime == 'custom') {
    time = startTime.value;
  }
  createParam = {
    dumpPeriod: formState.dumpPeriod,
    duration: formState.duration,
    endpointName: formState.endpointName.label,
    maxSamplingCount: formState.maxSamplingCount,
    minDurationThreshold: formState.minDurationThreshold,
    serviceId: serviceId.value,
    startTime: time,
  };
};
const openModal = (serviceInfo) => {
  if (serviceInfo.serviceId) {
    visible.value = true;
    endPointList.value = serviceInfo.endpointOptions;
    serviceId.value = serviceInfo.serviceId;
  } else {
    message.error('请先选择服务');
  }
};
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const onChange = (value: Dayjs) => {
  startTime.value = value.valueOf();
};
const handleReset = () => {
  formState.endpointName = undefined;
  formState.duration = 5;
  formState.monitorTime = 'now';
  formState.minDurationThreshold = 0;
  formState.dumpPeriod = 10;
  formState.maxSamplingCount = 1;
};
const onClose = () => {
  visible.value = false;
  handleReset();
};
// 提交
const handleSubmit = async () => {
  formRef.value.validate();
  handleCreateParam();
  let res = await createTask(createParam);
  if (res) {
    message.success('创建成功');
  }
  onClose();
};

defineExpose({ openModal });
</script>
